import useTheme from '@/hooks/useTheme'
import { Button, createTheme, CssBaseline } from '@mui/material'
import { ThemeProvider } from '@mui/material/styles'
import React, { useRef, useState, useEffect } from 'react'
import './index.scss'

import { Client }  from '@notionhq/client'

export default function HomePage () {
  const { muiTheme, changeTheme } = useTheme()
  const notion = new Client({ auth: 'secret_8kPmKPlfPdyuX4iOvrWEsYzga5O0LWYRPFS2AZ19ZoW' })

  const getDatabase = async () => {
    const databaseId = 'ea8b89e1839748e38cacdf9084f93fd6'

    await notion.pages.create({
      'cover': {
        'type': 'external',
        'external': {
          'url': 'https://upload.wikimedia.org/wikipedia/commons/6/62/Tuscankale.jpg',
        },
      },
      'icon': {
        'type': 'emoji',
        'emoji': '🥬',
      },
      'parent': {
        'type': 'database_id',
        'database_id': databaseId,
      },
      'properties': {
        'Name': {
          'title': [
            {
              'text': {
                'content': 'Tuscan kale',
              },
            },
          ],
        },
      },
      'children': [
        {
          'object': 'block',
          'heading_2': {
            'rich_text': [
              {
                'text': {
                  'content': 'Lacinato kale',
                },
              },
            ],
          },
        },
      ],
    })
  }

  useEffect(() => {
    getDatabase()
  }, [])

  return <ThemeProvider theme={muiTheme ?? createTheme({})}>
    <div className='page'>
      <div style={{ height: '30px' }}>

      </div>
      <main>This app is using the dark mode</main>
    </div>
  </ThemeProvider>
}


